[web开发] Flask+Python开发个人博客（四）

Ckeditor，最好的富文本编辑器之一。

这是[web开发] Flask+Python开发个人博客系列第四篇，在线编辑器的使用。
旧文三篇：
[web开发] Flask+Python开发个人博客（三）
[Web开发] Flask+Python 开发个人博客（二）
[web开发] Flask+Python开发个人博客（一）

既然是博客，就免不了发布文章，而一个便利的，所见即所得的在线编辑器就显得至关重要，flask + WTF Forms 提供的textarea 功能太少，而且样式难以定制，这个时候优秀的第3方控件就变成了我们的第一选择。经过比较，我选用了Ckeditor，今天我们来讲下
如何把它嵌入到我们的项目里去。
先看下嵌入到页面中的样子：

应用：
从ckeditor.com下载文件，放到flask目录下的static文件夹内。
在要引用的HTML head里引入如下代码：
···python
<script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
···

HTML页面嵌入ckeditor代码：

<textarea name="editor1" id="editor1" rows="10" cols="80">
     This is my textarea to be replaced with CKEditor.
 </textarea>
 <script>
     // Replace the <textarea id="editor1"> with a CKEditor
     // instance, using default configuration.
     CKEDITOR.replace( 'editor1' );
 </script>

就这么简单，那么CKeditor如何跟flask结合起来呢？我写了一个sample project：

项目目录如下：
static文件夹就是我们下载下来的ckeditor源文件。
templates下面是我们的HTML页面，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Page with CKEditor</title>
        <!-- 请确保CKEditor文件路径正确 -->
        <script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
    </head>
    <body>
        <form method = 'post' action=''>
            {{ form.csrf_token }}
            title: {{ form.title }}
            category: {{ form.category }}
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                {{ content }}
            </textarea>
            <script>
                // 用CKEditor替换<textarea id="editor1">
                // 使用默认配置
                CKEDITOR.replace('editor1');
            </script>
            {{ content }}
            publish: {{ form.publish }}
        </form>
    </body>
</html>

4.run.py 是整个工程源码:

#coding=utf-8
from flask import Flask
from flask import render_template
from flask import request
from flask_wtf import FlaskForm, validators
from wtforms import StringField, SubmitField
class PostEditor(FlaskForm):
    title = StringField('标题', [validators.DataRequired("Please enter your title")])
    category = StringField('类别', [validators.DataRequired("Please enter your category")])
    content = StringField('内容', [validators.DataRequired("Please enter your content")])
    publish = SubmitField('发布')
app = Flask(__name__)
app.secret_key = 'iTesting'
@app.route('/', methods=['GET', 'POST'])
def index():
    form = PostEditor()
    if request.method == "POST" or form.validate_on_submit():
        content = request.form.get('editor1')
        return render_template('ckeditor.html', content=content, form=form)
    return render_template('ckeditor.html', form=form)
if __name__ == "__main__":
   app.run(debug=True)

演示效果如下：
初始效果：

提交以后效果：

可以看到，当点击提交时候，我们在CKeditor里的内容被记下来发给flask后端了，所以我们才能再次看见我们输入的内容。

以上就是CKEditor结合flask的简单使用，但是缺点是只能接受文本内容，我们写博客肯定希望图文并茂，那么就需要配置ckeditor下的config.js了：

在config.js文件合适位置添加：

1	config.filebrowserUploadUrl = '/ckupload/';

在run.py 合适位置添加后台处理上传请求代码：

def gen_rnd_filename():
    filename_prefix = datetime.datetime.now().strftime('%Y%m%d%H%M%S')
    return '%s%s' % (filename_prefix, str(random.randrange(1000, 10000)))
@app.route('/ckupload/', methods=['POST'])
def ckupload():
    """CKEditor file upload"""
    error = ''
    url = ''
    callback = request.args.get("CKEditorFuncNum")
    if request.method == 'POST' and 'upload' in request.files:
        fileobj = request.files['upload']
        fname, fext = os.path.splitext(fileobj.filename)
        rnd_name = '%s%s' % (gen_rnd_filename(), fext)
        filepath = os.path.join(app.static_folder, 'upload', rnd_name)
        # 检查路径是否存在，不存在则创建
        dirname = os.path.dirname(filepath)
        if not os.path.exists(dirname):
            try:
                os.makedirs(dirname)
            except:
                error = 'ERROR_CREATE_DIR'
        elif not os.access(dirname, os.W_OK):
            error = 'ERROR_DIR_NOT_WRITEABLE'
        if not error:
            fileobj.save(filepath)
            url = url_for('static', filename='%s/%s' % ('upload', rnd_name))
    else:
        error = 'post error'
    res = """
<script type="text/javascript">
  window.parent.CKEDITOR.tools.callFunction(%s, '%s', '%s');
</script>
""" % (callback, url, error)
    response = make_response(res)
    response.headers["Content-Type"] = "text/html"
    return response